<template>
	<div class="main real-box">
		<div class="top-panel">
			<div class="search-pane">
				<div class="search-item-box">
					<a-select size="small" style="width: 200px"></a-select>
				</div>
				<div class="search-item-box">
					<a-select size="small" style="width: 200px"></a-select>
				</div>
				<div class="search-item-box">
					<a-select size="small" style="width: 200px"></a-select>
				</div>
				<div class="search-item-box">
					<a-button type="primary" ghost size="small">查询</a-button>
				</div>
				<div class="search-item-box">
					<a-button type="default" class="reset-btn" size="small">重置</a-button>
				</div>
			</div>
			<div class="btn">
				<a-button type="primary" @click="addStation">添加</a-button>
			</div>
		</div>
		<div class="table-box">
			<div class="table-contain">
				<a-table :columns="columns" :data-source="data" :rowKey="data => data.id"
				         :loading="loading" :pagination="false">
					<template slot="startTime" slot-scope="data">
						{{ moment ( data.startTime ).format ( 'YYYY-MM-DD' ) }}
					</template>
					<template slot="carType" slot-scope="data">
						<a-tag :color="data.carType == 1 ? '#f50' : (data.carType == 2 ? '#108ee9' : '#2db7f5')">
							{{ data.carType == 1 ? '汽车充电站' : (data.carType == 2 ? '电动车充电站' : '综合充电站') }}
						</a-tag>
					</template>
					<template slot="chargeType" slot-scope="data">
						<a-tag :color="data.chargeType == 1 ? '#f50' : (data.chargeType == 2 ? '#108ee9' : '#2db7f5')">
							{{ data.chargeType == 1 ? '直流快充' : (data.chargeType == 2 ? '交流慢充' : '综合充电站') }}
						</a-tag>
					</template>
					<template slot="status" slot-scope="data">
						<a-tag :color="data.status == 1 ? '#108ee9' : '#f50'" type="border">
							{{ data.status == 1 ? '使用中' : '维护中' }}
						</a-tag>
					</template>
					<template slot="action" slot-scope="data">
						<a-icon type="edit" class="icon-box" style="margin-right: 10px"
						        @click.stop="editStation(data.id)"/>
						<a-icon type="delete" class="icon-box" style="margin-right: 10px" @click.stop="deleteStation(data.id)"/>
						<a-icon type="tool" class="icon-box" @click.stop="setStatus(data)"/>
					</template>
				</a-table>
			</div>
			<div class="page-box">
				<a-pagination
					size="small"
					:showQuickJumper="true"
					:showSizeChanger="true"
					:current="page.current"
					:pageSize="page.pageSize"
					:total="page.total"
					:show-total="(total) => `共${total}条`"
					@showSizeChange="onShowSizeChange"
					@change="changePageSize"
				></a-pagination>
			</div>
		</div>
		<AddStation ref="station" :title="title" :id="id" @reloadList="queryList" :topDrawer="topDrawer"
		            @closeTopDrawer="closeTopDrawer"></AddStation>
		<!--设置电站开关状态-->
		<a-modal v-model:visible="setStationVisible" title="设置电站" @ok="saveStatus">
			<a-radio-group v-model:value="status">
				<a-radio :style="{height: '30px', lineHeight: '30px'}" :value="1">开启</a-radio>
				<a-radio :style="{height: '30px', lineHeight: '30px'}" :value="2">维护</a-radio>
			</a-radio-group>
			<div class="radio-box">
				<div class="radio-box-item">电站在运营过程中会根据实际情况适时调整：</div>
				<div class="radio-box-item">1、维护则是表示电站未开启或者需要维护保养状态，无法提供充电服务</div>
				<div class="radio-box-item">2、开启则是表示电站良好，可以正常运营和提供充电服务</div>
			</div>
		</a-modal>
	</div>
</template>

<script>
import AddStation from "@/view/station/components/AddStation";
import {api, post} from "@/api/api";
import moment from "moment";

const columns = [
	{title: '电站名称', dataIndex: 'stationName', key: 'stationName', width: 200},
	{title: '联系电话', dataIndex: 'telPhone', key: 'telPhone'},
	{title: '开放时间', dataIndex: 'openHour', key: 'openHour'},
	{title: '地址', dataIndex: 'address', key: 'address', width: 400, ellipsis: true},
	{title: '电站类型', scopedSlots: {customRender: 'carType'}},
	{title: '充电类型', scopedSlots: {customRender: 'chargeType'}},
	{title: '投运时间', scopedSlots: {customRender: 'startTime'}, width: 120},
	{title: '状态', scopedSlots: {customRender: 'status'}},
	{title: '操作', dataIndex: '', key: 'x', scopedSlots: {customRender: 'action'}},
];
export default {
	name: "StationList",
	components: {AddStation},
	data() {
		return {
			topDrawer: false,
			setStationVisible: false,
			page: {
				current: 1,
				pageSize: 20,
				total: 0,
			},
			id: '', // 编辑时的电站Id
			loading: true,
			data: [],
			columns,
			title: '',
			moment,
			// 电站状态
			status: 1,
		}
	},
	created() {
		this.queryList ()
	},
	methods: {
		queryList() {
			post ( api.StationEntities, {page: this.page.current, limit: this.page.pageSize} ).then ( res => {
				this.data = res.data.data
				this.page.total = res.data.count
				this.loading = false
			} )
		},
		editStation( id ) {
			this.title = '编辑电站'
			this.id = id
			this.topDrawer = true
		},
		deleteStation( id ) {
			console.log ( id )
		},
		addStation() {
			this.title = '添加电站'
			this.topDrawer = true
		},
		closeTopDrawer() {
			this.topDrawer = false;
			this.id = "";
		},
		setStatus( station ) {
			this.setStationVisible = true
			this.id = station.id
			this.status = station.status
		},
		// 保存电站开关设置
		saveStatus(e){
			let that = this
			that.$confirm({
				title: '提示',
				content: '确定此操作吗？',
				okText: '确认',
				cancelText: '取消',
				type: 'warning',
				showCancel: false,
				onOk() {
					post ( api.UpdateStation, {id: that.id, status: that.status} ).then ( res => {
						that.setStationVisible = false
						that.queryList()
					} )
				},
				onCancel() {
				}
			})
		},
		onShowSizeChange( current, pageSize ) {
			this.page.current = current
			this.page.pageSize = pageSize
			this.queryList ()
		},
		changePageSize( current, pageSize ) {
			this.page.current = current
			this.page.pageSize = pageSize
			this.queryList ()
		},
	}
}
</script>

<style lang="less" scoped>
@import "../../static/commons";
@import "../../static/stationList";
</style>
